Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at JavaScript typed arrays.
Clamped Conversion
Clamped conversions work differently than module conversion.
JavaScript provides us with constructors with typed arrays that does clamp conversions such as the Uint8ClampedArray
constructor.
It works differently from modulo conversion in that all underflowing values are converted to the lowest value.
And all overflowing values are converted to the highest value.
For example, we can create one by writing:
const uint8c = new Uint8ClampedArray(1);
Then if we write:
uint8c[0] = 255;
We get 255 as the value of uint8c[0]
.
If we write:
uint8c[0] = 256;
We still get 255.
On the other hand, if we write:
uint8c[0] = 0;
We get 0.
And if we write:
uint8c[0] = -1;
We still get 0.
Endianness
The endianness matters if we store multiple bytes in our typed arrays.
Big-endian means the most significant byte comes first.
So if we have 2 bytes like 0xABCD
, then 0xAB
comes first and then 0xCD
.
Little-endian means the least significant byte comes first.
This means the order of the digits is stored opposite of the way that they’re a store in a big-endian array.
Endianness different between CPU architectures and are consistent across native APIs.
Typed arrays kets us to communicate with those APIs.
This is why their endianness can’t be changed.
The endianness of binary files and protocols are fixed across platforms.
DataViews lets us specify the endianness so that we can transport files and communicate with different protocols across multiple platforms.
Negative Indexes
Negative index can be used with the slice
method.
Index -1 means the last element of the typed array.
For instance, we can write:
const arr = Uint8Array.of(0, 1, 2);
const last = arr.slice(-1);
We created an Uint8Array
with some numbers.
Then we called slice
with -1 to return a typed array with the last entry of arr
.
Offsets must be non-negative integers.
So if we pass in a negative number to the DataView.prototype.getInt8
method, we’ll get a RangeError.
ArrayBuffers
ArrayBuffers
store the data and views let us read and change them.
To create a DataView, we got to provide the constructor with an ArrayBuffer.
Typed array constructors can optionally create ArrayBuffers for us.
The ArrayBuffer
constructor takes a number with the length of the ArrayBuffers.
The ArrayBuffer
constructor has the isView
static method that returns true
if the argument we pass in is a view for an ArrayBuffers.
Only type arrays and DataViews have the [[ViewedArrayBuffer]]
internal slot which makes them views.
The ArrayBuffer.prototype.byteLength
is an instance method that returns the capacity of the ArrayBuffer in bytes.
It’s a getter method.
ArrayBuffer.prototype.slice(start, end)
is an instance method that returns a new ArrayByffer with the index greater than or equal to start
and less than end
.
start
and end
can be negative.
Conclusion
Typed arrays can wrap values in various ways.
Also, we’ve to have the correct endianness to store and communicate the data properly.
ArrayBuffers let us store binary data and slice them.